<template>
  <public-modal
    width="1000px"
    :footer="false"
    :title="title"
    modalStyle="SelectUserModal"
    :publicVisible="publicVisible"
    @handleOk="handleOk"
    @cancel="cancel"
  >
    <div slot="content">
      <!-- 查询区域 -->
      <!-- <div class="searchContent searchContent_item">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :span="10">
              <a-form-item label="用户账号" style="color: #05c7ce">
                <j-input :maxLength="30" placeholder="请输入用户账号" v-model="queryParam.username"></j-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-button type="primary" class="searchBtn" @click="searchQuery()" icon="search">查询</a-button>
                <a-button type="primary" class="resetBtn" @click="searchReset()" icon="reload" style="margin-left: 8px">
                  重置
                </a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div> -->

      <div class="search-group">
        <div class="input-wrap">
          <div class="label">用户账号:</div>
          <div class="input-item">
            <j-input :maxLength="30" v-model="queryParam.username" placeholder="请输入用户账号" />
          </div>
        </div>

        <div class="btn-wrap">
          <a-button class="searchBtn" @click="searchQuery()" type="primary">搜索</a-button>
          <a-button class="resetBtn" @click="searchReset()" type="primary">重置</a-button>
        </div>
      </div>
      <!-- table区域 -->
      <div>
        <a-table
          rowKey="id"
          class="tableList"
          :columns="columns"
          :loading="loading"
          :dataSource="dataSource"
          :pagination="ipagination"
          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          @change="handleTableChange"
        ></a-table>
      </div>
    </div>
  </public-modal>
</template>

<script>
import JInput from '@/components/jeecg/JInput'
import publicModal from '@/components/publicModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { postAction } from '@/api/manage'
export default {
  name: 'SelectUserModal',
  mixins: [JeecgListMixin],
  components: { publicModal, JInput },
  data() {
    return {
      title: '给角色分配用户',
      publicVisible: false,
      loading: false,
      columns: [
        {
          title: '用户账号',
          ellipsis: true,
          align: 'center',
          dataIndex: 'username',
          sorter: true,
        },
        {
          title: '用户名称',
          ellipsis: true,
          align: 'center',
          dataIndex: 'realname',
        },
        {
          title: '所属机关',
          ellipsis: true,
          align: 'center',
          dataIndex: 'policeAgencyId_dictText',
        },
      ],
      roleId: '',
      disableMixinCreated: true,
      url: {
        list: '/sys/user/page',
        addUser: '/sys/user/add_sys_user_role',
      },
    }
  },
  methods: {
    searchReset() {
      if (this.queryParam.roleId) {
        let id = this.queryParam.roleId
        this.queryParam = {}
        this.queryParam.roleId = id
      } else {
        this.queryParam = {}
      }
      this.resetTime = true
      this.loadData(1)
    },
    show(record) {
      this.roleId = record
      this.queryParam.roleId = record.id
      this.publicVisible = true
      this.searchQuery()
    },
    async handleOk() {
      if (this.selectedRowKeys.length < 1) {
        this.$message.error('请至少选择一个用户进行操作')
        return
      }
      let params = {
        roleId: this.roleId,
        userIdList: this.selectedRowKeys,
      }
      let res = await postAction(this.url.addUser, params)
      this.$message.success(res.message)
      this.$emit('refresh')
      this.cancel()
    },
    cancel() {
      this.queryParam = {}
      this.selectedRowKeys = []
      this.publicVisible = false
    },
  },
}
</script>
<style lang="less" scoped></style>
